<template>
	<view class="cashierSystemPage">
		<view class="cashierSystemTop ">
			<!-- <view class="flex padding_40rpx_0">
				<image class="img margin-right_30rpx" src="../../static/收银.webp" mode=""></image>
				<view class="font-weight_bold">
					{{cashier_name}}
				</view>
			</view> -->
			<view class="searchBtn">
				<view class="inputIphone flex iphones">

					<input class="font-overflow" v-model="name" placeholder="请输入会员名/手机号" />
					<view class="verificationCodes" @click="getVerificationCode()">搜索</view>
				</view>

			</view>

			
			<scroll-view :scroll-y="true" style="max-height: 330rpx;min-height: 175rpx" v-if="userList.length>=1">
				<block v-for="(item,index) in userList" :key="index">
					<view class="flex-between margin-top_40rpx" @click="radioChangeUser(item,index)">
						<view class="flex">
							<image class="images" :src="item.avatar" mode=""></image>
							<view class="flex-columns-center margin-left_30rpx">
								<text class="font-weight_bold margin-bottom_10rpx"
									style="font-size: 30rpx;">昵称:{{item.nickname}}</text>
								<text style="color: rgb(153, 153, 153);font-size: 24rpx;margin-bottom: 5rpx;">
									手机号:{{item.phone?item.phone:'-'}}
								</text>
								<text style="color: rgb(153, 153, 153);;font-size: 24rpx;">
									{{item.create_time}}
								</text>
							</view>
						</view>
						<label class="radio">
							<radio style="transform:scale(0.7)" value="r1" :checked="index == currentindex" />
						</label>
					</view>
				</block>
			</scroll-view>


		</view>
		
			<view class="cashierSelection border-bottom-ECECEC" v-for="(item, index) in items" :key="index">
				<view class=" flex-between ">
					<view class="flex">
						<image class="image " :src="item.img" mode=""></image>
						<view class=" margin-left_20rpx">
							{{item.name}}
						</view>
					</view>
					<label class="radio">
						<radio-group @change="radioChange">
							<label class="uni-list-cell uni-list-cell-pd">
								<view>
									<radio style="transform:scale(0.7)" :value="item.value"
										:checked="index == current" />
								</view>

							</label>
						</radio-group>
					</label>
				</view>
			</view>
			<view class=" fixed">
				
				<view class="nextBtn flex" @click="nextPay()">
					下一步
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			
			return {
				
				tabIndex: 4,
				account: '',
				current: 0,
				currentindex: 100,
				name: '',
				userList: [],
				radioBool: false,
				merchantInformation: uni.getStorageSync('login'),
				token: uni.getStorageSync('login').token,
				// 收银名字
				cashier_name: '',
				timeData:'',
				dataDetails: [{
						number: 0,
						text: '套餐卡核销数量'
					},
					{
						number: 0,
						text: '用户充值金额'
					},
					{
						number:0,
						text: '套餐卡购买金额'
					},
					{
						number: 0,
						text: '用户消费金额'
					},

				],
				form: {
					id: '',
					cashierType: '0',
					balance: '',
					integral: '',
					// 抵扣类型
					deductionType: "0",


				},
				itemss: [{

						value: '0',
						name: '营收记录',
						checked: 'true',
						img: '../../static/会员卡管理端/组合 1098.png',
						url: '/pages/revenueRecords/cashierRevenueRecords'
					},
					{
						value: '1',
						name: '套餐卡记录',
						img: '../../static/会员卡管理端/组合 1097.png',
						url: '/pages/packageManagement/verificationRecord/verificationRecords'
					},
					{
						value: '2',
						name: '扫码收银',
						img: '../../static/会员卡后台端/组合 1137.png',
						url: '/pages/cashierSystem/scanQRCodeCashier'
					},	
				],
				items: [{

						value: '0',
						name: '消费扣款',
						checked: 'true',
						img: '../../static/会员卡管理端/组合 914.png'
					},
					{
						value: '1',
						name: '余额充值',
						img: '../../static/会员卡管理端/组合 913.png'
					},
					{
						value: '2',
						name: '开通套餐卡',
						img: '../../static/会员卡管理端/组合 915.png'
					},
					{
						value: '3',
						name: '自提核销订单',
						img: '../../static/会员卡管理端/微信图片_20240507152357.png'
					}

				],
			}
		},
		onLoad() {
			
			this.init()
			this.homeDataFn()
		},
		onShow() {
			this.homeDataFn()
			this.$at.releaseKey('submit');
			this.$at.releaseKey('submitPay');
		},
		methods: {
			
			paymentCode(){
				this.$sun.navGo('/pages/storePaymentCode/storePaymentCode')
			},
			async homeDataFn() {
				const result = await this.$http.post({
					url: this.$api.staffStatistics,
					data: {
						

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {

					this.timeData = result.data
					this.dataDetails.forEach((item) => {
						switch (item.text) {
							case '套餐卡核销数量':
								item.number = this.timeData.package_use_count;
								break;
							case '用户充值金额':
								item.number = this.timeData.recharge_amount;
								break;
							case '套餐卡购买金额':
								item.number = this.timeData.package_amount;
								break;
							case '用户消费金额':
								item.number = this.timeData.consumption_amount;
								break;
								// 可根据实际情况继续添加其他匹配条件
						}
					})
				} else {
					this.$sun.toast(result.msg, 'none')
				}
			},
			// 跳转页面
			JumpPage(url) {
				this.$sun.navGo(url)
			},
			async init() {
				const res = await this.$http.post({
					url: this.$api.config,
					data: {


					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				console.log(res)
				this.cashier_name = res.data.cashier_name
			},
			// 关闭购物弹层
			closeWriteOffIcon() {
				this.$refs.receiveCouponPopup.close()
			},
			radioChange(evt) {
				console.log(evt)
				// 0 消费扣款 1 余额充值 2开通套餐卡
				this.form.cashierType = evt.detail.value
				this.current = evt.detail.value
			},
			radioChangeUser(item, i) {
				// this.radioBool = !this.radioBool
				console.log(item, i)
				this.currentindex = i

				this.form.id = item.id
				this.form.balance = item.balance
				this.form.integral = item.surplus_integral ? item.surplus_integral : item.integral

			},
			getVerificationCode() {

				this.$at.uniDoFunc({
					key: 'submit',
					success: async () => {
						this.$at.lockKey('submit');
						// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择
						if (!this.name) {
							this.$sun.toast("请输入会员名", 'none')
							this.userList=[]
							this.$at.releaseKey('submit');
						} else {

							const res = await this.$http.post({
								url: this.$api.userListApi,
								data: {

									name: this.name
								},
								headers: {
									'Authorization': `Bearer ${this.token}`
								}

							})
							console.log(res)
							if (res.code == 0) {
								if (res.data.list.length) {
									this.userList = res.data.list

									// 跳转到登录页面
									this.$at.releaseKey('submit');
									
								} else {
									this.$sun.toast('没有查询到该用户', 'none')
									this.$at.releaseKey('submit');
								}




							} else {
								this.$at.releaseKey('submit');
								this.$sun.toast(res.msg, 'none')
							}
						}




					}
				});


			},
			// 选择收银方式选择下一步
			nextPay() {
				if (!this.name) {
					this.$sun.toast("请输入会员名", 'none')
					this.userList=[]
					
				}else{
					// 0 消费扣款 1 余额充值 2开通套餐卡
					this.$at.uniDoFunc({
						key: 'submitPay',
						success: async () => {
							this.$at.lockKey('submitPay');
					
							if (this.form.cashierType == 3) {
								this.$at.releaseKey('submitPay');
								this.$sun.navGo('/pages/orderManagement/orderManagement')
							} else {
								// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择
								if (!this.form.id) {
									this.$at.releaseKey('submitPay');
									this.$sun.toast("请输入会员名", 'none')
					
								} else {
									if (this.form.cashierType == 0) {
										this.$at.releaseKey('submitPay');
										this.$sun.navGo('/pages/cashierSystem/deductionAmount/deductionAmount', {
											...this.form
										})
					
					
									} else if (this.form.cashierType == 1) {
										this.$at.releaseKey('submitPay');
										this.$sun.navGo('/pages/cashierSystem/balanceRecharge/balanceRecharge', {
											...this.form
										})
					
					
									} else if (this.form.cashierType == 2) {
										this.$at.releaseKey('submitPay');
										this.$sun.navGo(
											'/pages/cashierSystem/choosePackageCard/choosePackageCard', {
												...this.form
											})
					
									}
								}
							}
						}
					});
				}
			
			}
		}
	}
</script>

<style lang="less" scoped>
	.cashierSystemPage {
		margin-bottom:  96rpx;
		.fixed {

			position: fixed;
			bottom: 20rpx;
			width: 100%;
			z-index: 999;
          
			.scanCodeBtn {
				width: 268.32rpx;
				height: 96rpx;
				box-sizing: border-box;
				border: 2rpx solid rgb(0, 87, 254);
				background: rgb(255, 255, 255);
				color: rgb(0, 87, 254);
			}

			.nextBtn {
				margin: 0 12rpx;
				height: 96rpx;
				background: rgb(0, 87, 254);
				color: rgb(255, 255, 255);

			}
		}

		.backgroundImage {
			padding: 36rpx 30rpx;
			background-image: url('../../static/会员卡管理端/6045b99a804a5_01.png');
			
			background-repeat: no-repeat;
			background-size: cover;

			.headformation {
				

				.avater {
					width: 96rpx;
					height: 96rpx;
					margin-right: 15rpx;
				}

				.memberType {
					/* 矩形 1043 */
					color: rgb(255, 255, 255);
					font-family: 思源黑体;
					font-size: 24rpx;
					font-weight: 400;
					border-radius: 12rpx;
					width: 112rpx;
					height: 36rpx;
					background-color: rgb(108, 133, 252);
				}

				.membershipCode {
					display: flex;
					flex-direction: column;
					align-items: center;

					.codeImage {
						margin-bottom: 8rpx;
						width: 32.02rpx;
						height: 31.16rpx;
					}
				}
			}
		}

		.cashierSelection {

			padding: 30rpx;

			.image {
				width: 56rpx;
				height: 56rpx;
				border-radius: 50%;
			}


			background: rgb(255, 255, 255);
		}

		.cashierSystemTop {


			.img {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
			}


			background: rgb(255, 255, 255);

			.searchBtn {
				padding: 30rpx;

				.inputIphone {

					height: 92rpx;
					padding: 26rpx 0 26rpx 20rpx;
					box-sizing: border-box;
					border-radius: 0;
					border-radius: 20rpx 0rpx 0rpx 20rpx;
					background: rgb(246, 246, 246);
				}

				.verificationCode {
					width: 36rpx;
					height: 36rpx;
				}

				.iphones {


					.verificationCodes {

						text-align: center;
						width: 170rpx;
						height: 85rpx;
						line-height: 85rpx;
						border-radius: 100rpx;
						font-size: 20rpx;

						border-radius: 0px 10px 10px 0px;


						background: rgb(28, 110, 255);
						color: #fff;
					}
				}
			}

			.images {
				width: 116rpx;
				height: 116rpx;
				border-radius: 50%;
			}
		}
	}

	page {
		background: #f6f6f6;
	}
</style>